<template>
  <g class="bullet" :transform="props.transform">
    <path
      d="M0,0.5 h2 v0.5 h1 v1 h-1 v0.5 h-2 z"
      :fill="color"
      :transform="rot"
    />
  </g>
</template>

<script setup>
  import { computed } from "vue"
  import { BULLET } from '@/utils/global'

  const props = defineProps({
    direction: {
      default: 'right',
      validator(value, props) {
        return ['up', 'down', 'left', 'right'].includes(value)
      }
    },
    transform: {
      type: String,
      default: ''
    },
    level: {
      type: Number,
      default: 1,
      validator(value, props) {
        return value >= 1
      }
    },
  })

  const rot = computed(() => {
    const degs = {
      'up': 270,
      'down': 90,
      'left': 180,
      'right': 0
    }
    return `rotate(${degs[props.direction]}, ${BULLET.size / 2}, ${BULLET.size / 2})` // 要确保是绕中心点(即中心坐标(1.5, 1.5))旋转
  })

  const color = computed(() => {
    const colors = [
      '#ADADAD',
      '#FF0000',
      '#FFA500',
      '#FFFF00',
      '#008000',
      '#00FFFF',
      '#0000FF',
      '#800080',
    ]
    return colors[Math.min(props.level, colors.length) - 1]
  })
</script>

<style lang="scss" scoped>

</style>